---
title: Migration depuis VuePress
description: Conseils pour migrer un projet VuePress existant vers Astro
sidebar:
  label: VuePress
type: migration
stub: true
framework: VuePress
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

[VuePress](https://vuePress.vuejs.org) est un générateur de sites statiques open-source basé sur Vue.

## Principales similitudes entre VuePress et Astro

VuePress et Astro partagent certaines similitudes qui vous aideront à migrer votre projet :

- VuePress et Astro sont tous deux des générateurs de sites statiques Javascript modernes avec des structures de fichiers de projet similaires. Tous deux utilisent un [dossier spécial `src/pages/` pour le routage basé sur les fichiers](/fr/basics/astro-pages/). La création et la gestion des pages de votre site devraient vous sembler familières.

- Astro et VuePress sont tous deux conçus pour les [sites web axés sur le contenu](/fr/concepts/why-astro/#axé-sur-le-contenu), avec une excellente prise en charge intégrée des fichiers Markdown. L'écriture en Markdown vous sera familière et vous pourrez conserver votre contenu existant.

- Astro possède [une intégration officielle pour l'utilisation des composants Vue](/fr/guides/integrations-guide/vue/) et prend en charge [l'installation des paquets NPM](/fr/guides/imports/#paquets-npm), dont plusieurs pour Vue. Vous serez en mesure d'écrire des composants d'interface utilisateur Vue et pourrez conserver tout ou partie de vos composants et dépendances Vue existants.


## Principales différences entre VuePress et Astro

Lorsque vous recréez votre site VuePress avec Astro, vous remarquerez quelques différences importantes.

- VuePress est une application monopage (SPA) basée sur Vue. Les sites Astro sont des applications multi-pages construites à l'aide de [composants `.astro`](/fr/basics/astro-components/), mais peuvent également prendre en charge [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS](/fr/guides/framework-components/) et la création de modèles HTML bruts.

- [Modèles de mise en page](/fr/basics/layouts/) : Les sites VuePress sont créés à l'aide de fichiers Markdown (`.md`) pour le contenu des pages et de modèles HTML (`.html`) pour la mise en page. Astro est basé sur des composants et utilise des composants Astro, qui incluent des modèles HTML pour les pages, les mises en page et les éléments individuels de l'interface utilisateur. Astro peut également créer des [pages à partir de fichiers `.md` et `.mdx`](/fr/guides/markdown-content/), en utilisant un composant de mise en page Astro pour envelopper le contenu Markdown dans un modèle de page.

- VuePress a été conçu pour construire des sites riches en contenu, centrés sur Markdown et possède des fonctionnalités intégrées spécifiques à la documentation que vous devriez créer vous-même dans Astro. Au lieu de cela, Astro offre des fonctionnalités spécifiques à la documentation par le biais d'un [thème de documentation officiel](https://starlight.astro.build). Ce site web a été la source d'inspiration de ce modèle ! Vous pouvez également trouver d'autres [thèmes de documentation communautaires](https://astro.build/themes?search=&categories%5B%5D=docs) avec des fonctionnalités intégrées dans notre vitrine de thèmes.

## Passer de VuePress à Astro

Pour convertir un site de documentation VuePress en Astro, commencez par notre [thème de documentation Starlight comme modèle de démarrage](https://starlight.astro.build) officiel, ou explorez d'autres thèmes de documentation communautaires dans notre [vitrine de thèmes](https://astro.build/themes?search=&categories%5B%5D=docs).

Vous pouvez passer un argument `--template` à la commande `create astro` pour démarrer un nouveau projet Astro avec l'un de nos modèles officiels. Vous pouvez aussi [démarrer un nouveau projet à partir de n'importe quel dépôt Astro existant sur GitHub](/fr/install-and-setup/#utiliser-un-thème-ou-un-modèle-de-démarrage).

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm create astro@latest -- --template starlight
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm create astro@latest --template starlight
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn create astro --template starlight
    ```
    </Fragment>
  </PackageManagerTabs>

Apportez vos fichiers de contenu Markdown existants à [créer des pages Markdown](/fr/guides/markdown-content/). Vous pouvez toujours profiter du [routage basé sur les fichiers](/fr/guides/routing/) en déplaçant ces documents de `docs` dans VuePress vers `src/pages/` dans Astro. Créez des dossiers avec des noms qui correspondent à votre projet VuePress existant, et vous devriez être en mesure de conserver vos URLs existantes.

VuePress, ou tout autre thème que vous avez installé, a probablement géré une grande partie de la mise en page et des métadonnées de votre site pour vous. Vous souhaiterez peut-être en savoir plus sur [la création de mises en page Astro en tant qu'enveloppes de page Markdown](/fr/basics/layouts/#mises-en-page-markdown) pour découvrir comment gérer vous-même la création de modèles dans Astro, y compris la balise `<head>` de votre page.

Vous pouvez trouver la documentation de démarrage d'Astro, ainsi que d'autres modèles, sur [astro.new](https://astro.new). Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod.

## Ressources communautaires

:::note[Vous avez une ressource à partager ?]
Si vous avez trouvé (ou créé !) une vidéo ou un article de blog utile sur la conversion d'un site VuePress en site Astro, [ajoutez-le à cette liste](https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/migrate-to-astro/from-vuepress.mdx) !
:::
